<!DOCTYPE html>
<html>
	<!DOCTYPE html>
	<html>
		<head lang="en">
			<meta charset="UTF-8">
			<title></title>
			<style>
				* {
					padding: 0;
					margin: 0;
				}

				div {
					width: 500px;
					height: 300px;
					margin: 200px auto;
					overflow: hidden;/*overflow属性的值hidden	内容会被修剪，元素框外面的内容不会被显示，浏览器不会显示滚动条。*/
				}

				div>ul {
					/*设置ul的宽度为2倍div的宽度*/
					width: 600%;
					list-style: none;
					/*动画属性*/
					animation: imgMove 10s linear infinite;

				}

				/* 暂停动画 */
				div>ul:hover {
					animation-play-state: paused;
				}

				div>ul>li {
					width: 500px;
					float: left;/*让div下面的ul下面的li往左侧浮动*/
				}

				div>ul>li>img {
					width: 500px;
					height: 300px;
				}

				/*创建动画*/
				@keyframes imgMove {
					from {
						transform: translateX(0px);
						/*transform 属性向元素应用 2D 或 3D 转换。该属性允许您对元素进行旋转、缩放、移动或倾斜。
						translateX(x)	定义转换，只是用 X 轴的值。
						
*/
					} 
					to {
						transform: translateX(-2000px);
					}
				}
			</style>
		</head>
		<body>
			<div>
				<ul>
					<li><img src="images/1.jpg" alt="" /></li>
					<li><img src="images/2.jpg" alt="" /></li>
					<li><img src="images/3.jpg" alt="" /></li>
					<li><img src="images/4.jpg" alt="" /></li>
					<li><img src="images/5.jpg" alt="" /></li>
					<li><img src="images/1.jpg" alt="" /></li> 
				</ul>
			</div>
		</body>
	</html>